<template>
  <div>
    <button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button>
    <h4 class="text-center">用户详情--{{ e_NAME }}</h4>

    <form>
      <div class="form-group">
        <label>姓名</label>
        <input type="text" class="form-control" id="InputName" v-model="e_NAME" required>
      </div>

      <div class="form-group">
        <label for="exampleFormControlSelect1">性别</label>
        <select class="form-control" id="Gender" v-model="e_GENDER">
          <option value="1">男</option>
          <option value="0">女</option>
        </select>
      </div>

      <div class="form-group">
        <label>出生日期</label>
        <input type="text" class="form-control" id="Birthday" placeholder="yyyy-mm-dd" v-model="e_BIRTH" required>
        <small class="form-text text-muted">日期格式yyyy-mm-dd</small>
      </div>

      <div class="form-group">
        <label>入职日期</label>
        <input type="text" class="form-control" id="Workday" placeholder="yyyy-mm-dd" v-model="e_START" required>
        <small class="form-text text-muted">日期格式yyyy-mm-dd</small>
      </div>

      <div class="form-group">
        <label for="exampleFormControlSelect1">职位</label>
        <select class="form-control" id="job" v-model="e_JOB">
          <option value="0">一般员工</option>
          <option value="1">部门经理</option>
          <option value="2">人事部人员</option>
          <option value="3">总经理</option>
        </select>
      </div>

      <div class="form-group">
        <label>Password</label>
        <input class="form-control" type="text" value="123456" v-model="e_PASSWORD">
      </div>

      <div class="form-group">
        <label for="exampleFormControlSelect1">部门</label>
        <select class="form-control" id="department" v-model="e_DEPARTMENT">
          <option value="1">部门1</option>
          <option value="2">部门2</option>
          <option value="3">部门3</option>
        </select>
      </div>

      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="isChecked" required>
        <label class="form-check-label" for="exampleCheck1">确认信息无误</label>
      </div>

      <button type="submit" class="btn btn-primary" :disabled="!isValid" @click="modifyUserInfo">修改</button>
    </form>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'MyUserDetail',
  props: ['id'],
  data() {
    return {
      isChecked: false,
      e_NAME: null,
      e_GENDER: null,
      e_BIRTH: null,
      e_START: null,
      e_JOB: null,
      e_PASSWORD: "123456",
      e_DEPARTMENT: null,
      e_ID: this.id
    }
  },
  mounted() {
    this.getUserinfo(this.e_ID);
  },
  computed: {
    isValid() {
      return this.e_DEPARTMENT !== null &&
        this.e_NAME !== null &&
        this.e_GENDER !== null &&
        this.e_BIRTH !== null &&
        this.e_START !== null &&
        this.e_JOB !== null && this.isChecked
    }
  },
  methods: {
    getUserinfo(id) {
      axios.get('/api/personnel/' + id).then(res => {
        console.log(res.data)
        let userinfo = res.data.data
        this.e_NAME = userinfo.e_NAME,
          this.e_GENDER = userinfo.e_GENDER,
          this.e_BIRTH = userinfo.e_BIRTH,
          this.e_START = userinfo.e_START,
          this.e_JOB = userinfo.e_JOB,
          this.e_PASSWORD = userinfo.e_PASSWORD,
          this.e_DEPARTMENT = userinfo.e_DEPARTMENT
      })
    },
    modifyUserInfo() {
      let inputData = {
        e_NAME: this.e_NAME,
        e_GENDER: this.e_GENDER,
        e_BIRTH: this.e_BIRTH,
        e_START: this.e_START,
        e_JOB: this.e_JOB,
        e_PASSWORD: this.e_PASSWORD,
        e_DEPARTMENT: this.e_DEPARTMENT,
        e_ID: this.e_ID
      }
      axios.put("/api/personnel/", inputData).then(res => {
        console.log(res.data)
        if (res.data.data) {
          alert("修改成功")
          this.$router.push('/home')
        } else {
          alert("修改失败")
        }
      }).catch(err => {
        alert("修改失败 " + err.message)
        console.log(err.message)
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
